<template>
  <div class="app-container">
    <!-- 添加或修改支付配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" size="mini">
            <el-form-item label="支付类型" prop="type" v-if="!form.id">
              <el-radio-group v-model="form.type" :disabled="disabled">
                <el-radio label="1">微信支付</el-radio>
                <el-radio label="2">支付宝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="appId" prop="appId">
              <el-input v-model="form.appId" placeholder="请输入APPID" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="商户号" prop="mchId"  v-if="form.type=='1'">
              <el-input v-model="form.mchId" placeholder="请输入商户号" :disabled="disabled"/>
            </el-form-item>
            <el-form-item :label="form.type=='1'?'密钥':'应用私钥'" prop="mchKey">
              <el-input v-model=" form.mchKey"  placeholder="请输入密钥" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="api证书序列号" prop="certSerialNo" v-if="form.type=='1'">
              <el-input v-model="form.certSerialNo" placeholder="请输入api证书序列号" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="apiV3秘钥" prop="apiV3Key" v-if="form.type=='1'">
              <el-input v-model="form.apiV3Key" placeholder="请输入apiV3秘钥" :disabled="disabled"/>
            </el-form-item>
            <el-form-item :label="form.type=='1'?'apiclient_cert.p12':'支付宝根证书'" prop="keyPath">
              <el-input v-model="form.keyPath" placeholder="请输入apiclient_cert.p12" :disabled="disabled"/>
            </el-form-item>
            <el-form-item :label="form.type=='1'?'apiclient_key.pem':'支付宝公钥证书'" prop="privateKeyPath">
              <el-input v-model="form.privateKeyPath" placeholder="请输入apiclient_key.pem"
                        :disabled="disabled"/>
            </el-form-item>
            <el-form-item :label="form.type=='1'?'apiclient_cert.pem':'应用公钥证书'" prop="privateCertPath">
              <el-input v-model="form.privateCertPath" placeholder="请输入apiclient_cert.pem"
                        :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="微信开放平台移动应用APPID" prop="subAppId" v-if="form.type=='1'">
              <el-input v-model="form.subAppId" placeholder="请输入微信开放平台移动应用APPID" :disabled="disabled"/>
            </el-form-item>
            <!--<el-form-item label="状态">-->
              <!--<el-radio-group v-model="form.status" :disabled="disabled">-->
                <!--<el-radio-->
                  <!--v-for="item in dict.sys_normal_disable"-->
                  <!--:key="item.dictValue"-->
                  <!--:label="item.dictValue"-->
                <!--&gt;{{item.dictLabel}}-->
                <!--</el-radio>-->
              <!--</el-radio-group>-->
            <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getPayConfig, addPayConfig, updatePayConfig} from "@/api/system/payConfig";

  export default {
    name: "PayConfigFrom",
    dicts: ['sys_normal_disable',],
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          type: [
            {required: true, message: "支付类型不能为空", trigger: "change"}
          ],
          mchId: [
            {required: true, message: "商户号不能为空", trigger: "change"}
          ],
          appId: [
            {required: true, message: "appId不能为空", trigger: "blur"}
          ],
          mchKey: [
            {required: true, message: "密钥不能为空", trigger: "blur"}
          ],
        }
      };
    },
    created() {

    },
    methods: {
      show(option) {
        this.reset();
        this.disabled = option.type == 'VIEW'
        if (option.type == 'ADD') {
          this.open = true;
          this.title = "新增支付配置";
        } else if (option.type == 'UPDATE' || option.type == 'VIEW') {
          getPayConfig(option.id).then(response => {
            this.form = response.data;

            if (option.type == 'VIEW') {
              this.title = "查看支付配置";
            } else {
              this.title = "修改支付配置";
            }
            this.open = true;
          });
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          type: '1',
          appId: null,
          mchId: null,
          mchKey: null,
          keyPath: null,
          privateKeyPath: null,
          privateCertPath: null,
          certSerialNo: null,
          apiV3Key: null,
          subAppId: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          status: "0",
          updateTime: null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updatePayConfig(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.cancel()
              });
            } else {
              addPayConfig(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.cancel()
              });
            }
          }
        });
      }
    }
  };
</script>
